<template>
  <div class="checkout-detail">
    <template v-if="isDataResult">
        <!-- 入住信息 -->
        <div class="title">入住信息</div>
        <div class="form">
          <!-- 地址 -->
          <div class="form-item">
            <picker
              v-if="actionKey === 'add'"
              :range="hasRentHouseData"
              :value="hasRentHouse"
              @change="hasRentHouseChange">
              <CustomInput
                title="地址"
                placeholder="请选择房源信息"
                :value="formItem.roomAddress" />
            </picker>
            <CustomInput
              v-else
              title="地址"
              placeholder="请选择房源信息"
              :value="formItem.roomAddress" />
          </div>
          <!-- 房号 -->
          <div class="form-item">
            <picker
              v-if="actionKey === 'add'"
              :range="hasRentHouseData"
              :value="hasRentHouse"
              @change="hasRentHouseChange">
              <CustomInput
                title="房号"
                placeholder="请选择房源信息"
                :value="formItem.roomNo" />
            </picker>
            <CustomInput
              v-else
              title="房号"
              placeholder="请选择房源信息"
              :value="formItem.roomNo" />
          </div>
          <!-- 入住日期 -->
          <div class="form-item">
            <CustomInput
              title="入住日期"
              placeholder="请选择房源信息"
              :value="formItem.checkInDate" />
          </div>
          <!-- 到期日期 -->
          <div class="form-item">
            <CustomInput
              title="到期日期"
              placeholder="请选择房源信息"
              :value="formItem.checkOutDate" />
          </div>
          <!-- 退房日期 -->
          <div class="form-item">
            <picker
              mode="date"
              start="1900-01-01"
              end="2030-12-31"
              :value="formItem.returnDate"
              @change="returnDateChange">
              <CustomInput
                title="退房日期"
                placeholder="请选择退房日期"
                :value="formItem.returnDate" />
            </picker>
          </div>
        </div>

        <!-- 租客信息 -->
        <div class="title">租客信息</div>
        <div class="form">
          <!-- 名称 -->
          <div class="form-item">
            <CustomInput
              title="名称"
              placeholder="请选择房源信息"
              :value="formItem.rentorName" />
          </div>
          <!-- 证件号 -->
          <div class="form-item">
            <CustomInput
              title="证件号"
              placeholder="请选择房源信息"
              :value="formItem.idcards" />
          </div>
          <!-- 联系电话 -->
          <div class="form-item">
            <CustomInput
              title="联系电话"
              placeholder="请选择房源信息"
              :value="formItem.rentorPhone" />
          </div>
        </div>


        <!-- 应退 -->
        <div class="title">应退</div>
        <div class="form">
          <!-- 房租 -->
          <div class="form-item">
            <CustomInput
              v-model="formItem.rentMoney"
              inputType="number"
              title="房租"
              placeholder="请输入房租"
              :isInput="true" />
          </div>
          <!-- 租房押金 -->
          <div class="form-item">
            <CustomInput
              v-model="formItem.rentDespoit"
              inputType="number"
              title="租房押金"
              placeholder="请输入租房押金"
              :isInput="true" />
          </div>
          <!-- 电费押金 -->
          <div class="form-item">
            <CustomInput
              v-model="formItem.electricDespoit"
              inputType="number"
              title="电费押金"
              placeholder="请输入电费押金"
              :isInput="true" />
          </div>
          <!-- 水费押金 -->
          <div class="form-item">
            <CustomInput
              v-model="formItem.waterDespoit"
              inputType="number"
              title="水费押金"
              placeholder="请输入水费押金"
              :isInput="true" />
          </div>
          <!-- 钥匙数量 -->
          <div class="form-item">
            <CustomInput
              v-model="formItem.keyCount"
              inputType="number"
              title="钥匙数量"
              placeholder="请输入钥匙数量"
              :isInput="true" />
          </div>
          <!-- 钥匙押金 -->
          <div class="form-item">
            <CustomInput
              v-model="formItem.keyDespoit"
              inputType="number"
              title="钥匙押金"
              placeholder="请输入钥匙押金"
              :isInput="true" />
          </div>
          <!-- 门卡数量 -->
          <div class="form-item">
            <CustomInput
              v-model="formItem.doorCardCount"
              inputType="number"
              title="门卡数量"
              placeholder="请输入门卡数量"
              :isInput="true" />
          </div>
          <!-- 门卡押金 -->
          <div class="form-item">
            <CustomInput
              v-model="formItem.doorCardDespoit"
              inputType="number"
              title="门卡押金"
              placeholder="请输入门卡押金"
              :isInput="true" />
          </div>
        </div>
        <!-- 应扣水费 -->
        <div class="title">应扣水费</div>
        <div class="form">
          <!-- 水价 -->
          <div class="form-item">
            <CustomInput
              v-model="formItem.waterPrice"
              inputType="number"
              title="水价"
              company="元/吨"
              placeholder="请输入水价"
              :isInput="true" />
          </div>
          <!-- 上期水表值 -->
          <div class="form-item">
            <CustomInput
              v-model="formItem.waterPrevUsed"
              inputType="number"
              title="上期水表值"
              company="吨"
              placeholder="请输入上期水表值" />
          </div>
          <!-- 本期水表值 -->
          <div class="form-item">
            <CustomInput
              v-model="formItem.waterNowUsed"
              inputType="number"
              title="本期水表值"
              company="吨"
              placeholder="请输入本期水表值"
              :isInput="true" />
          </div>
        </div>

        <!-- 应扣电费 -->
        <div class="title">应扣电费</div>
        <div class="form">
          <!-- 电价 -->
          <div class="form-item">
            <CustomInput
              v-model="formItem.electricPrice"
              inputType="number"
              title="电价"
              company="元/度"
              placeholder="请输入电价"
              :isInput="true" />
          </div>
          <!-- 上期电表值 -->
          <div class="form-item">
            <CustomInput
              v-model="formItem.electricPrevUsed"
              inputType="number"
              title="上期电表值"
              company="度"
              placeholder="请输入上期电表值" />
          </div>
          <!-- 本期电表值 -->
          <div class="form-item">
            <CustomInput
              v-model="formItem.electricNowUsed"
              inputType="number"
              title="本期电表值"
              company="度"
              placeholder="请输入本期电表值"
              :isInput="true" />
          </div>
        </div>

        <!-- 应扣燃气费 -->
        <div class="title">应扣燃气费</div>
        <div class="form">
          <!-- 燃气价 -->
          <div class="form-item">
            <CustomInput
              v-model="formItem.gasPrice"
              inputType="number"
              title="燃气价"
              company="元/方"
              placeholder="请输入燃气价"
              :isInput="true" />
          </div>
          <!-- 上期燃气值 -->
          <div class="form-item">
            <CustomInput
              v-model="formItem.gasPrevUsed"
              inputType="number"
              title="上期燃气值"
              company="方"
              placeholder="请输入上期燃气值" />
          </div>
          <!-- 本期燃气值 -->
          <div class="form-item">
            <CustomInput
              v-model="formItem.gasNowUsed"
              inputType="number"
              title="本期燃气值"
              company="方"
              placeholder="请输入本期燃气值"
              :isInput="true" />
          </div>
        </div>

        <!-- 应扣其他 -->
        <div class="title">应扣其他</div>
        <div class="form">
          <!-- 房租 -->
          <div class="form-item">
            <CustomInput
              v-model="formItem.rentMoneyPay"
              inputType="number"
              title="房租"
              placeholder="请输入应扣房租"
              :isInput="true" />
          </div>
          <!-- 损坏赔偿 -->
          <div class="form-item">
            <CustomInput
              v-model="formItem.destoryPay"
              inputType="number"
              title="损坏赔偿"
              placeholder="请输入损坏赔偿费用"
              :isInput="true" />
          </div>
          <!-- 违约金 -->
          <div class="form-item">
            <CustomInput
              v-model="formItem.wyMoney"
              inputType="number"
              title="违约金"
              placeholder="请输入违约金"
              :isInput="true" />
          </div>
          <!-- 其他扣款 -->
          <div class="form-item">
            <CustomInput
              v-model="formItem.otherPay"
              inputType="number"
              title="其他扣款"
              placeholder="请输入其他扣款"
              :isInput="true" />
          </div>
        </div>

        <!-- 综合 -->
        <div class="title">综合</div>
        <div class="form">
          <!-- 合计 -->
          <div class="form-item">
            <CustomInput
              v-model="formItem.mustReturn"
              title="合计"
              placeholder="请输入合计" />
          </div>
          <!-- 备注 -->
          <div class="form-item">
            <CustomInput
              v-model="formItem.remark"
              title="备注"
              placeholder="请输入备注"
              :isInput="true" />
          </div>
        </div>

        <!-- 保存按钮 -->
        <div class="action">
          <i-button type="primary" @click="actionClick">保存</i-button>
        </div>
    </template>
  </div>
</template>

<script>
import CustomInput from 'components/CustomInput/CustomInput'
import { mapState } from 'vuex'
import { ERR_OK } from 'api/config'
import { saveData, getHasRentHouse } from 'api/checkoutDetail'
import { shareMixin } from 'common/js/mixins'

export default {
  mixins: [shareMixin()],
  components: {
    CustomInput
  },
  computed: {
    hasRentHouseData () {
      if (this.hasRentHouseAllData.length === 0) {
        return []
      }

      const arr = []

      this.hasRentHouseAllData.map(item => {
        arr.push(item.roomNo)
      })

      return arr
    },
    ...mapState({
      currentItem: state => state.checkoutDetail.currentItem,
      actionKey: state => state.checkoutDetail.actionKey
    })
  },
  mounted () {
    this.initData()
  },
  data () {
    return {
      isDataResult: false,
      formItem: {},
      hasRentHouse: 0,
      hasRentHouseAllData: []
    }
  },
  methods: {
    async initData () {
      await this.getListData()

      if (this.actionKey === 'edit') {
        this.formItem = JSON.parse(JSON.stringify(this.currentItem))

        this.hasRentHouse = this.hasRentHouseData.findIndex(item => item === this.formItem.roomNo)
      } else if (this.actionKey === 'addEdit') {
        this.formItem = JSON.parse(JSON.stringify(this.currentItem))
        this.$set(this.formItem, 'returnDate', '')
        this.$set(this.formItem, 'rentMoneyPay', 0)
        this.$set(this.formItem, 'destoryPay', 0)
        this.$set(this.formItem, 'wyMoney', 0)
        this.$set(this.formItem, 'otherPay', 0)
        this.$set(this.formItem, 'mustReturn', 0)

        this.hasRentHouse = this.hasRentHouseData.findIndex(item => item === this.formItem.roomNo)
      } else {
        this.hasRentHouse = 0

        this.formItem = {
          roomId: '',
          roomAddress: '',
          roomNo: '',
          checkInDate: '',
          checkOutDate: '',
          returnDate: '',
          rentorName: '',
          idcards: '',
          rentorPhone: '',
          rentMoney: 0,
          rentDespoit: 0,
          electricDespoit: 0,
          waterDespoit: 0,
          keyCount: 0,
          keyDespoit: 0,
          doorCardCount: 0,
          doorCardDespoit: 0,
          rentMoneyPay: 0,
          destoryPay: 0,
          wyMoney: 0,
          otherPay: 0,
          waterPrice: 0,
          waterPrevUsed: 0,
          waterNowUsed: 0,
          electricPrice: 0,
          electricPrevUsed: 0,
          electricNowUsed: 0,
          gasPrice: 0,
          gasPrevUsed: 0,
          gasNowUsed: 0,
          mustReturn: 0,
          remark: ''
        }
      }
    },
    actionClick () {
      const obj = JSON.parse(JSON.stringify(this.formItem))

      this.deleteCustomKey(obj)

      if (obj.createDt !== undefined) {
        delete obj.createDt
      }
      if (obj.getMoneyDate !== undefined) {
        delete obj.getMoneyDate
      }

      if (obj.getMoneyType !== undefined) {
        delete obj.getMoneyType
      }

      if (this.actionKey === 'addEdit') {
        delete obj.id
        obj.roomId = this.currentItem.id
      }

      this.saveData(obj)
    },
    deleteCustomKey (obj) {
      for (let key in obj) {
        if (key.indexOf('__custom_') > -1 || obj[key] === null) {
          delete obj[key]
        }
      }
    },
    returnDateChange (e) {
      console.log(e)
      this.formItem.returnDate = e.target.value
    },
    hasRentHouseChange (e) {
      this.hasRentHouse = e.target.value
      const data = this.hasRentHouseAllData[this.hasRentHouse]

      this.formItem.roomId = data.id
      this.formItem.roomNo = data.roomNo
      this.formItem.roomAddress = data.roomAddress
      this.formItem.checkInDate = data.checkInDate
      this.formItem.checkOutDate = data.checkOutDate
      this.formItem.rentorName = data.rentorName
      this.formItem.rentorId = data.rentorId
      this.formItem.idcards = data.idcards
      this.formItem.rentorPhone = data.rentorPhone
      this.formItem.rentMoney = data.rentMoney
      this.formItem.rentDespoit = data.rentDespoit
      this.formItem.electricDespoit = data.electricDespoit
      this.formItem.waterDespoit = data.waterDespoit
      this.formItem.keyCount = data.keyCount
      this.formItem.keyDespoit = data.keyDespoit
      this.formItem.doorCardCount = data.doorCardCount
      this.formItem.doorCardDespoit = data.doorCardDespoit
      this.formItem.waterPrice = data.waterPrice
      this.formItem.waterPrevUsed = data.waterPrevUsed
      this.formItem.waterNowUsed = data.waterNowUsed
      this.formItem.electricPrice = data.electricPrice
      this.formItem.electricPrevUsed = data.electricPrevUsed
      this.formItem.electricNowUsed = data.electricNowUsed
      this.formItem.gasPrice = data.gasPrice
      this.formItem.gasPrevUsed = data.gasPrevUsed
      this.formItem.gasNowUsed = data.gasNowUsed
    },
    getListData () {
      return new Promise(async (resolve, reject) => {
        this.isDataResult = false
        this.$showLoading('加载中')

        const res = await getHasRentHouse()

        this.isDataResult = true
        this.$hideLoading()

        if (res.code === ERR_OK) {
          this.hasRentHouseAllData = res.rows
        }

        resolve()
      })
    },
    async saveData (data) {
      this.$showLoading('保存中')

      const res = await saveData(data)

      this.$hideLoading()

      if (res.code === ERR_OK) {
        this.$showToast({
          title: '保存成功',
          success: () => {
            wx.navigateBack()
          }
        })
      } else {
        this.$showToast({
          title: (res && res.msg) || '保存失败',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .checkout-detail {
    width: 100%;
    overflow-x: hidden;
    > .title {
      width: 100%;
      line-height: 40px;
      background-color: rgb(248, 248, 248);
      font-size: 14px;
      padding-left: 10px;
    }
    > .form {
      > .form-item {
        border-bottom: 1px solid rgb(238, 238, 238);
      }
    }
  }
</style>
